<template>
  <h3>统计</h3>

  <el-card shadow="hover">
    <template #header>
      <div class="card-header">
        <span>商品概况</span>
      </div>
    </template>
    <el-row>
      <el-col :span="6">
        <el-statistic title="商品总数" :value="268500" />
      </el-col>
      <el-col :span="6">
        <el-statistic title="今日销量" :value="268500" />
      </el-col>
      <el-col :span="6">
        <el-statistic title="本月销量" :value="268500" />
      </el-col>
      <el-col :span="6">
        <el-statistic title="缺货警报" :value="268500" />
      </el-col>
    </el-row>
  </el-card>

  <el-card shadow="hover" class="mt-2">
    <template #header>
      <div class="card-header">
        <span>订单概况</span>
      </div>
    </template>
    <el-row>
      <el-col :span="6">
        <el-statistic title="订单总数" :value="268500" />
      </el-col>
      <el-col :span="6">
        <el-statistic title="今日订单" :value="268500" />
      </el-col>
      <el-col :span="6">
        <el-statistic title="本月订单" :value="268500" />
      </el-col>
      <el-col :span="6">
        <el-statistic title="今日退款" :value="268500" />
      </el-col>
    </el-row>
  </el-card>

  <el-card shadow="hover" class="mt-2">
    <template #header>
      <div class="card-header">
        <span>会员概况</span>
      </div>
    </template>
    <el-row>
      <el-col :span="6">
        <el-statistic title="会员总数" :value="268500" />
      </el-col>
      <el-col :span="6">
        <el-statistic title="今日注册" :value="268500" />
      </el-col>
      <el-col :span="6">
        <el-statistic title="本月注册" :value="268500" />
      </el-col>
      <el-col :span="6">
        <el-statistic title="6个月未登录" :value="268500" />
      </el-col>
    </el-row>
  </el-card>

  <el-row :gutter="12" class="mt-2">
    <el-col :span="8">
      <el-card shadow="hover">
        <h4 class="m-0">新会员TOP10</h4>
        <ul class="list-group list-group-flush list-group-numbered  text-secondary">
          <li v-for="i in 10" key="i" class="list-group-item d-flex justify-content-between">
            <span>用户 {{ i }}</span>
            <span>04-23 16:54</span>
          </li>
        </ul>
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card shadow="hover">
        <h4 class="m-0">购买金额TOP10</h4>
        <ul class="list-group list-group-flush list-group-numbered  text-secondary">
          <li v-for="i in 10" key="i" class="list-group-item d-flex justify-content-between">
            <span>用户 {{ i }}</span>
            <span>{{ i * 1000 }}元</span>
          </li>
        </ul>
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card shadow="hover">
        <h4 class="m-0">购买次数TOP10</h4>
        <ul class="list-group list-group-flush list-group-numbered  text-secondary">
          <li v-for="i in 10" key="i" class="list-group-item d-flex justify-content-between">
            <span>用户 {{ i }}</span>
            <span>{{ i * 1000 }}次</span>
          </li>
        </ul>
      </el-card>
    </el-col>
  </el-row>

  <el-row :gutter="12" class="mt-2">
    <el-col :span="8">
      <el-card shadow="hover">
        <h4 class="m-0">商品销量TOP10</h4>
        <ul class="list-group list-group-flush list-group-numbered  text-secondary">
          <li v-for="i in 10" key="i" class="list-group-item d-flex justify-content-between">
            <span>商品名称有点长长长 {{ i }}元</span>
            <span>{{ i * 1000 }}件</span>
          </li>
        </ul>
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card shadow="hover">
        <h4 class="m-0">商品浏览TOP10</h4>
        <ul class="list-group list-group-flush list-group-numbered  text-secondary">
          <li v-for="i in 10" key="i" class="list-group-item d-flex justify-content-between">
            <span>商品名称有点长长长 {{ i }}元</span>
            <span>{{ i * 1000 }}次</span>
          </li>
        </ul>
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card shadow="hover">
        <h4 class="m-0">商品收藏TOP10</h4>
        <ul class="list-group list-group-flush list-group-numbered  text-secondary">
          <li v-for="i in 10" key="i" class="list-group-item d-flex justify-content-between">
            <span>商品名称有点长长长 {{ i }}元</span>
            <span>{{ i * 1000 }}次</span>
          </li>
        </ul>
      </el-card>
    </el-col>
  </el-row>
  <el-row :gutter="12" class="mt-2">
    <el-col :span="8">
      <el-card shadow="hover">
        <h4 class="m-0">商品退货TOP10</h4>
        <ul class="list-group list-group-flush list-group-numbered  text-secondary">
          <li v-for="i in 10" key="i" class="list-group-item d-flex justify-content-between">
            <span>订单 {{ i * 100 }}元</span>
            <span>04-23 16:54</span>
          </li>
        </ul>
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card shadow="hover">
        <h4 class="m-0">商品差评TOP10</h4>
        <ul class="list-group list-group-flush list-group-numbered  text-secondary">
          <li v-for="i in 10" key="i" class="list-group-item d-flex justify-content-between">
            <span>订单 {{ i * 100 }}元</span>
            <span>04-23 16:54</span>
          </li>
        </ul>
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card shadow="hover">
        <h4 class="m-0">商品投诉TOP10</h4>
        <ul class="list-group list-group-flush list-group-numbered  text-secondary">
          <li v-for="i in 10" key="i" class="list-group-item d-flex justify-content-between">
            <span>订单 {{ i * 100 }}元</span>
            <span>04-23 16:54</span>
          </li>
        </ul>
      </el-card>
    </el-col>
  </el-row>

  <el-row :gutter="12" class="mt-2">
    <el-col :span="8">
      <el-card shadow="hover">
        <h4 class="m-0">搜索TOP10</h4>
        <ul class="list-group list-group-flush list-group-numbered  text-secondary">
          <li v-for="i in 10" key="i" class="list-group-item d-flex justify-content-between">
            <span>商品名称有点长长长 {{ i }}元</span>
            <span>{{ i * 1000 }}件</span>
          </li>
        </ul>
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card shadow="hover">
        <h4 class="m-0">购物车TOP10</h4>
        <ul class="list-group list-group-flush list-group-numbered  text-secondary">
          <li v-for="i in 10" key="i" class="list-group-item d-flex justify-content-between">
            <span>商品名称有点长长长 {{ i }}元</span>
            <span>{{ i * 1000 }}件</span>
          </li>
        </ul>
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card shadow="hover">
        <h4 class="m-0">订单金额TOP10</h4>
        <ul class="list-group list-group-flush list-group-numbered  text-secondary">
          <li v-for="i in 10" key="i" class="list-group-item d-flex justify-content-between">
            <span>订单 {{ i * 100 }}元</span>
            <span>04-23 16:54</span>
          </li>
        </ul>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import { onMounted } from 'vue';

onMounted(() => {

})
</script>
